<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const obj = {
            tag: 'div',
            children: [{
                tag: 'span',
                children: 'hello'
            }]

        }
        // 定义虚拟DOM节点的结构  
        function createElement(tag, props, ...children) {
            return {
                tag,
                props: props || {},
                children: children.length ? children : undefined,
            };
        }

        // 示例：创建一个虚拟DOM节点  
        const vdom = createElement(
            'div',
            { id: 'app', class: 'container' },
            createElement('h1', null, 'Hello, Virtual DOM!'),
            createElement('p', null, 'This is a simple example of a virtual DOM structure.')
        );

        // render
        function render(obj, root) {
            const el = document.createElement(obj.tag)
            if (typeof obj.children === 'string') {
                const context = document.createTextNode(obj.children)
                el.appendChild(context)
            } else if (obj.children) {
                obj.children.forEach(element => {
                    render(element, el)
                });
            }
            root.appendChild(el)
        }
        // console.log(vdom);</script>
</body>

</html>